<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      max-height="200"
      :cell-style="lineStyle"
    >
      <el-table-column align="center" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">项目名称</template>
        <template slot-scope="scope">
          {{ proName }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="empname" label="负责人" width="60">
      </el-table-column>
      <el-table-column
        align="center"
        prop="feetype"
        label="明细类型"
        width="70"
      >
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注" width="110">
      </el-table-column>
      <el-table-column align="center" prop="execdate" label="日期" width="90">
      </el-table-column>
      <el-table-column align="center" prop="fee" label="金额/(万元)" width="90">
      </el-table-column>
      <el-table-column align="center" width="60">
        <template slot="header" slot-scope="scope">编辑</template>
        <template slot-scope="scope">
          <div size="mini" type="success" @click="updateTableItem(scope.row)">
            <i class="iconfont icon-bianji"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="60">
        <template slot="header" slot-scope="scope">删除</template>
        <template slot-scope="scope">
          <div size="mini" type="success" @click="delTableitem(scope.row)">
            <i class="iconfont icon-shanchu"></i>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form :model="form">
        <div class="form-title">项目名称&emsp;&emsp;{{ proName }}</div>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-select
            filterable
            v-model="form.emcode"
            placeholder="请选择负责人"
          >
            <el-option
              v-for="(item, index) in perOptions"
              :key="index"
              :label="item.name"
              :value="item.empcode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div class="form-title">
          明细类型&emsp;&emsp;{{ selectItem.feetype }}
        </div>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.notes" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="请选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="金额(万元)" :label-width="formLabelWidth">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getEmpolyeeListApi } from "@/api/index";

export default {
  props: {
    tableData: {
      type: Array,
      default: null,
    },
    proName: {
      type: String,
      default: null,
    },
    onpenInnerDrawer: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      // 总计金额
      total: null,
      // 选中项
      selectItem: {},
      // 负责人列表
      perOptions: [],
      dialogFormVisible: false,
      // 修改的弹框form表单
      form: {
        procode: "",
        emcode: "",
        notes: "",
        date: "",
        amount: "",
      },
      formLabelWidth: "120px",
    };
  },

  mounted() {
    this.getEmpolyeeList();
  },
  methods: {
    lineStyle({ row, rowIndex }) {
      let stylejson = {
        fontSize: "12px",
      };
      return stylejson;
    },

    // 获取人员信息
    async getEmpolyeeList() {
      let res = await getEmpolyeeListApi();
      res.forEach((item, index) => {
        res[index].name = item.empname;
      });
      this.perOptions = [...res];
    },

    // 删除当前行
    delTableitem(row) {
      console.log("删除当前行---->", row, this.tableData);
      this.tableData.splice(
        this.tableData.findIndex((item) => {
          return item.id === row.id;
        }),
        1
      );
    },

    // 修改当前行信息
    updateTableItem(row) {
      this.dialogFormVisible = true;
      this.selectItem = row;
      this.form.emcode = this.perOptions.find((item) => {
        return item.name === this.selectItem.empname;
      }).name;
      this.form.notes = this.selectItem.remark;
      this.form.date = this.selectItem.execdate;
      this.form.amount = this.selectItem.fee;
      console.log("选中项---->", this.selectItem);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-title {
  margin-left: 52px;
  margin-bottom: 10px;
}

.el-select,
.el-date-editor {
  width: 100%;
}
</style>